import React from 'react';
import { Todo } from "./assets";
import { Draggable } from "react-beautiful-dnd";
import styled from "@emotion/styled";
import { css } from '@emotion/react';
interface Props {
    todo:Todo,
    index:number,
    handleEdit:(data:Todo)=>void
}
export default function TodoItem(props:Props){


    return (
        <Draggable
            draggableId={String(props.todo.id)}
            index={props.index}
        >
            {(provided, snapshot) => (
                <Container
                    ref={provided.innerRef}
                    {...provided.draggableProps}
                >
                    <Main isDragging={snapshot.isDragging} isBeingDragged={snapshot.isDragging && !snapshot.isDropAnimating}>
                        {/* 处理那个可以拖拽 */}
                        <Title {...provided.dragHandleProps} >
                           <span> {props.todo.taskName}</span>

                        </Title>
                        <div onClick={()=>props.handleEdit(props.todo)}>{props.todo.taskContent}</div>
                    </Main>
                </Container>
            )}
        </Draggable>
    );

}

const Container = styled.div<{ }>`
    margin-top: 15px;
`;

const Title = styled.div`
  font-size: 18px;
  padding: 6px 12px;
  border-bottom: 1px solid #ccc;
  cursor: grab;
  display: flex;
  justify-content: space-between;
  align-items: center;
`;

const Main = styled.div<{isBeingDragged:boolean, isDragging:boolean}>`
    background-color: ${props=>props.isDragging ? '#fff' : 'transparent'};
    min-height: 100px;
    padding: 16px 8px;
    box-shadow: 0 0 1px 1px yellowgreen;
     ${props =>
    {
        return (
            props.isBeingDragged &&
      css`transform: rotate(-3deg);    
        box-shadow: 5px 10px 30px 0px rgba(9, 30, 66, 0.15);`
        );
    }
}
`;
